<template>
    <div class="fc-suspension" v-if="suspension" @click.prevent="suspensionHideFn"
        :class="{'active':isActive,'toBottom':toBottom,'hided':suspensionHide,'fc-suspension-annimation':suspensionMsg.isNeedAnimation}">
        <img v-if="suspensionMsg && suspensionMsg.image" :src="suspensionMsg.image" alt="">
    </div>
</template>

<script>
export default {
    name: "FcSuspension",
    props: {
        suspensionProps: {
            type: Object,
        }
    },
    data () {
        return {
            isActive: false,
            toBottom: false,
            suspension: true,
            suspensionHide: false,
            suspensionMsg: {
                image: '',
                hrefUrl: '',
                isNeedAnimation: true,
            }
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        init () {
            let that = this;
            this.suspensionMsg = Object.assign({}, this.suspensionMsg, this.suspensionProps);
            this.toBottom = true;
            setTimeout(() => {
                this.isActive = true
            }, 1000)
        },
        suspensionHideFn () {
            /*判断是否授权登录，或者登录，没有登录的话跳转登录页面*/
            if (!this.userId) {
                this.$router.push('/to/login');
                return;
            }
            if (this.suspensionMsg.hrefUrl) {
                window.location.href = this.suspensionProps.hrefUrl;
            } else {
                // this.suspensionHide = true;
                setTimeout(() => {
                    // this.suspension=false;
                    this.$emit('animationCb', true);
                }, 500)
            }
        },
        suspensionShowFn () {
            this.suspension = true;
            this.suspensionHide = false;
        }
    }
}
</script>

<style scoped lang="scss">
.fc-suspension {
    display: block;
    position: fixed;
    left: 0.1rem;
    width: 0.78rem;
    height: 1.18rem;
    bottom: 0.9rem;
    img {
        width: 100%;
    }
}
.fc-suspension-annimation {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 3;
    -webkit-animation: toBottom 1s linear;
    -o-animation: toBottom 1s linear;
    animation: toBottom 1s linear;
}
@keyframes toBottom {
    0% {
        -webkit-transform: scale(0.1);
        -moz-transform: scale(0.1);
        -ms-transform: scale(0.1);
        -o-transform: scale(0.1);
        transform: scale(0.1);
        bottom: -1.18rem;
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        bottom: 0.55rem;
    }
}
.fc-suspension.active {
    -webkit-animation: volume 1s infinite linear;
    -o-animation: volume 1s infinite linear;
    animation: volume 1s infinite linear;
}
@keyframes volume {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
.fc-suspension.hided {
    -webkit-animation: suspensionHide 0.8s infinite linear;
    -o-animation: suspensionHide 0.8s infinite linear;
    animation: suspensionHide 0.8s infinite linear;
}
@keyframes suspensionHide {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.1);
        -moz-transform: scale(0.1);
        -ms-transform: scale(0.1);
        -o-transform: scale(0.1);
        transform: scale(0.1);
    }
}
.suspensionHide {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1);
}
</style>